import ToolTips from '@/components/ToolTips';
import './StockStatus.scss';
import { useState } from 'react';
type ThisProps = {
  in_stock: boolean;
  stock_qty: number;
  status: string;
  onlyIcon?: boolean;
};
const StockStatus = ({ in_stock, stock_qty, status, onlyIcon }: ThisProps) => {
  return (
    <div
      className={
        'product-stock-status ' + (in_stock ? 'in-stock' : 'out-of-stock')
      }
    >
      {in_stock ? (
        stock_qty >= 20 ? (
          <>
            <ToolTips text={'In stock'}>
              <span
                className="iconfont icon-check"
                // title="In stock"
              />
            </ToolTips>
            {!onlyIcon && <span>Stock: {stock_qty}</span>}
          </>
        ) : (
          <>
            <ToolTips text={'Limited Stock'}>
              <span
                className="iconfont icon-clock"
                // title="Limited Stock"
              />
            </ToolTips>
            {!onlyIcon && <span>Stock: {stock_qty}</span>}
          </>
        )
      ) : (
        <>
          <ToolTips text={'Out of stock'}>
            <span
              className="iconfont icon-stop"
              // title="Out of stock"
            />
          </ToolTips>
          {!onlyIcon && <span>Out of stock</span>}
        </>
      )}
    </div>
  );
};

export default StockStatus;
